<script setup>
  import {useRouter} from "vue-router";
  import {ref} from "vue";

  let router = useRouter()
  let username = ref('')
  let password = ref('')
  let login=()=>{
    console.log(username.value,password.value)
    //进行登录之间的逻辑判断
    if (username.value==='root'&&password.value==='root'){
      router.push({path:'/home',query:{'username':username.value}})
      //进行存储登录进来的数据 前端的存储机制
      localStorage.setItem('username',username.value)
    }else {
      alert('登录失败，账号或者密码错误！');
      //再次设置回到登录的页面中

    }
  }
</script>

<template>
<div>
  账号：<input type="text" v-model="username" placeholder="请输入你的账号"><br>
  密码：<input type="password" v-model="password" placeholder="请输入你的密码"><br>
  <button @click="login()">登录</button>
</div>
</template>

<style scoped>

</style>